<template>
	<view class="container">
		<view class="body" v-if="shop">
			<view class="b-box">
				<!-- <view class="card-box-head u-flex u-col-center">
					基本信息
				</view> -->
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								状态
							</view>
							<view class="list-con-item list-con-right tbsm">
								{{shop.status_text}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					基本信息
					<!-- <uni-icons type="arrowright"></uni-icons> -->
				</view>
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								店铺名称
							</view>
							<view class="list-con-item list-con-right tbsm">
								{{shop.name}}
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								店铺地址
							</view>
							<view class="list-con-item list-con-right tbsm">
								{{shop.address}}
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								入驻时间
							</view>
							<view class="list-con-item list-con-right tbsm">
								{{$util.date("Y/m/d H:i",shop.createtime)}}
							</view>
						</view>
						<view class="list-conten" style="height: auto;">
							<view class="list-con-item list-con-left">
								店铺头像
							</view>
							<view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<image @tap="lookImg(0)" class="order-img" mode="aspectFill" :src="$IMG_URL+shop.logo">
								</image>
							</view>
						</view>
						<view class="list-conten" style="height: auto;">
							<view class="list-con-item list-con-left">
								小程序码
							</view>
							<view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<image @tap="lookImg(1)" class="order-img" mode="aspectFill"
									:src="$IMG_URL+shop.qr_code_image"></image>
							</view>
						</view>
						<!-- <view class="list-conten">
							<view class="list-con-item list-con-left">
								店铺地址
							</view>
							<view class="list-con-item list-con-right tbsm">
								{{goods.no_feedback == 1 ?'无需反馈' :'优质反馈（需含图）'}}
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								服务费
							</view>
							<view class="list-con-item list-con-right tbsm">
								{{order.process_money}}元
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- <view class="b-box" v-if="proof.length != 0">
				<view class="card-box-head u-flex u-col-center">
					反馈信息
					<uni-icons type="arrowright"></uni-icons>
				</view>
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">

						<view class="list-conten" style="height: auto;">
							<view class="list-con-item list-con-left">
								订单截图
							</view>
							<view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<image @tap="lookImg(1)" class="order-img" mode="aspectFill"
									:src="$IMG_URL+proof[0].one_image"></image>
								<image @tap="lookImg(2)" class="order-img" mode="aspectFill"
									:src="$IMG_URL+proof[0].two_image" style="margin-left: 20rpx;"></image>
							</view>
						</view>
						<view class="list-conten" style="height: auto;">
							<view class="list-con-item list-con-left">
								反馈截图
							</view>
							<view class="list-con-item list-con-right tbsm" style="padding: 30rpx 0;">
								<image @tap="lookImg(3)" class="order-img" mode="aspectFill"
									:src="$IMG_URL+proof[0].three_image"></image>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				requestIng: false,
				id: 3,
				shop: null,
			}
		},
		computed: {
			imageList() {
				let imageList = [];
				if (this.shop) {
					if (this.shop?.logo != '') {
						imageList.push(this.$IMG_URL + this.shop?.logo)
					}
					if (this.shop?.qr_code_image != '') {
						imageList.push(this.$IMG_URL + this.shop?.qr_code_image)
					}
				}
				return imageList
			}
		},
		onLoad(e) {
			this.id = e?.id;
		},
		onShow() {
			this.getShopDetail()
		},
		methods: {
			lookImg(index) {
				let that = this;
				uni.previewImage({
					current: index,
					urls: that.imageList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getShopDetail() {
				let that = this;
				that.$util.loading();
				that.$http('user.shopDetail', {
						id: that.id
					}).then(res => {
						console.log('商家详情', res)
						that.requestIng = false
						uni.hideLoading()
						if (res.code === 1) {
							that.shop = res.data
						} else {
							that.$util.msg(res?.msg || '信息获取失败');
							uni.navigateBack()
						}
					})
					.catch(err => {
						that.requestIng = false
						uni.hideLoading()
					})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background: #eee;
		min-height: 100vh;

		.body {
			margin: 30rpx 0 120rpx;

			.b-box {
				margin-top: 30rpx;
			}
		}

		.card-box-head {
			color: #222;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-left: 5%;
			height: 50rpx;
			align-items: center;
			margin-bottom: 20rpx;
			font-weight: 700;
		}

		.card-box {
			width: 90%;
			min-height: 100rpx;
			margin: 0 5%;
			background: #FFF;
			background-size: 100% 100%;
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(213, 175, 97, 0.34);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;




			&-body {
				width: 90%;
				margin: 0 5%;
				display: flex;

				.card-box-body-picker {
					width: 100%;
					height: 100%;
				}

				.cb-wallet-item {
					display: flex;
					flex-direction: column;
					flex: 1;

					.cb-wallet-item-num {
						font-size: 40rpx;
						font-weight: 700;
					}

					.cb-wallet-item-tip {
						font-size: 28rpx;
					}
				}
			}

			&-body-cloumn {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;

				.no-shop-tip {
					color: #888;
					margin-bottom: 20rpx;
				}

				button {
					color: #ff9000;
					background: #fff;
					border: 1px solid #ff9000;
					border-radius: 37px;
					height: 74rpx;
					line-height: 74rpx;
					width: 180rpx;
					font-size: 28rpx;
				}

				.list-conten {
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					align-items: center;
					font-size: 28rpx;
					color: #888;

					.list-con-item {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #666;
						flex: 1;

						.order-img {
							width: 200rpx;
							height: 200rpx;
							border: 1px solid #eee;
							border-radius: 5px;
							// padding-left: 20rpx;
						}
					}

					.list-con-active {
						color: #ff9000;

					}

					.list-con-left {}

					.list-con-right {
						color: #bbb;
						font-size: 24rpx;
						font-weight: 400;
					}

					.tbsm {
						/* width: 75%;
						height: 80%; */
						justify-content: flex-end;
						color: #333;
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			}

			.recharge {
				height: 60rpx;
				line-height: 60rpx;

				font-weight: 600;
				font-size: 34rpx;
				color: #ff9000;
				text-align: center;

			}
		}
	}
</style>
